<template>
  <div class="msite-tabs">
    <van-tabs v-model="active" @change="changeTabs">
      <van-tab v-for="(item,index) in tabsList" :key="index" :title="item.name">
        <!-- <div v-if="active === 0" class="tab-box">
          <vehicle-list :listData="vehicleList[0].vehicle" />
        </div>
        <div v-if="active === 1" class="business-box">
          <business-list ref="childList" :listData="vehicleList[1].business" />
          </div>
        <div v-if="active === 2" class="square-box">
          <square-list ref="childList2" :listData="vehicleList[2].square" />
        </div>
        <div v-if="active === 3" class="strategy-box">
          <strategy-list ref="childList3" :listData="vehicleList[3].strategy" />
        </div> -->
      </van-tab>
    </van-tabs>
    <component ref="componentShow" :class="getClass" :is='component' :listData="listData"></component>

  </div>
</template>

<script>
import { getCarList, getSquareList, getStrategyList, selectCompany } from '../../api';
import VehicleList from './Components/VehicleList.vue';
import SquareList from './Components/SquareList.vue';
import BusinessList from './Components/BusinessList.vue';
import StrategyList from './Components/StrategyList';
export default {
  components: { VehicleList, SquareList, BusinessList, StrategyList },
  name: "msiteTabs",
  data() {
    return {
      component: "vehicle-list",
      listData: [],
      getClass: '',
      active: 0,
      tabsList: [
        { name: "车辆" },
        { name: "商家" },
        { name: "广场" },
        { name: "攻略" }
      ]
    };
  },
  mounted() {
    getCarList().then(res => {
      this.listData = res.data.data;
    })
  },
  methods: {
    changeTabs(name) {
      // 获取车辆列表
      if(name === 0) {
        this.component = "vehicle-list";
        this.getClass = "tab-box";
        getCarList().then(res => {
          this.listData = res.data.data
        })
      }
      if(name === 1) {
        this.component = "business-list";
        this.getClass = "business-box";
        getCarList().then(res => {
          // 先把租车公司找出来
          selectCompany().then(res2 => {
            // 再将租车公司的名字去重查找旗下车辆
            this.listData = res2.data.data;
            this.$nextTick(() => {
              this.$refs.componentShow.getBusiness();
            })
          })
        })
      }
      if(name === 2) {
        this.component = "square-list";
        this.getClass = "square-box";
        getSquareList().then(res => {
          this.listData = res.data.data
        })
      }
      if(name === 3) {
        this.component = "strategy-list";
        this.getClass = "strategy-box";
        getStrategyList().then(res => {
          this.listData = res.data.data;
        })
      }
    }
    // 详情页
    // toDetails(idx) {
    //   this.$router.push('/details')
    //   console.log(idx);
    // }
  }
};
</script>

<style lang="scss" scoped>
.msite-tabs {
  width: 100%;
  height: 100px;
}
.van-tab__pane {
  width: 100%;
  margin: 0 auto;
  padding: 0 2%;
  box-sizing: border-box;

  // 广场
  .business-box, .square-box, .strategy-box {
    width: 100%;
    height: 100%;
  }
}
</style>